<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { projectName } from '/public/config/config'
defineProps({
  msg: String,
})
const userInfo = JSON.parse(localStorage.getItem('userInfo'))
const count = ref(0)
const router = useRouter()
const logout = () => {
  localStorage.removeItem('menuInfo')
  localStorage.removeItem('userInfo')
  router.replace('/login')
}
</script>

<template>


  <div class="header flex jcb aic">
    <div>

    </div>
    <div>
      {{ projectName }}
    </div>
    <div class="flex jcb aic">
      <el-dropdown class="mt10">
        <span class="el-dropdown-link">
          {{ userInfo.userName }}，欢迎您
          <el-icon class="el-icon--right">
            <arrow-down />
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            <!-- <el-dropdown-item divided>Action 5</el-dropdown-item> -->
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>


</template>

<style scoped>
.header {
  width: 100%;
  height: 60px;
  text-align: center;
  color: #333;
  font-size: 24px;
  font-weight: 600;
  background-color: #fff;
}
</style>
